<template>
  <div class="daraBoardMainItem_content flex flex-c">
    <div class="header_box flex flex-r mb-10">
      <!-- // 桶统计 inventory库存 inUse在使用 deactivate停用 -->
      <div class="header_boxLeft flex flex-c flex-jsb mr-10 p-10 pt-20">
        <div class="content_title">在用垃圾桶号牌</div>
        <div class="content_valueBox flex flex-ac">
          <div class="val">{{ bucketStatistics.inUse }}</div>
          <div class="unit ml-10">个</div>
        </div>
      </div>
      <div class="header_boxRight flex flex-c flex-jsb p-10 pt-20">
        <div class="content_title">失效垃圾桶号牌</div>
        <div class="content_valueBox flex flex-ac">
          <div class="val">{{ bucketStatistics.deactivate }}</div>
          <div class="unit ml-10">个</div>
        </div>
      </div>
    </div>
    <div class="main_box flex flex-c flex-jsb p-10 pt-20">
      <div class="content_title">备用垃圾桶号牌</div>
      <div class="content_valueBox flex flex-ac flex-jsb mb-10">
        <div class="zhi_box flex flex-ac">
          <div class="val">{{ bucketStatistics.inventory }}</div>
          <div class="unit ml-10">个</div>
        </div>
        <div class="icon">
          <img :src="iconPng" class="img" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
} from "vue";
import { useStore } from "vuex";
const store = useStore();

const props = defineProps({
  assetStatisticsObj: {
    type: Object,
    required: false,
    default: {},
  },
});
let bucketStatistics = ref({
  inventory: 0,
  inUse: 0,
  deactivate: 0,
});
// 桶统计 inventory库存 inUse在使用 deactivate停用
const iconPng = new URL("@/assets/img/png/user.png", import.meta.url).href;
onMounted(() => {});

onBeforeUnmount(() => {});
watch(
  () => props.assetStatisticsObj,
  () => {
    // console.log("垃圾桶号牌", props.assetStatisticsObj?.bucketStatistics);
    if (props?.assetStatisticsObj) {
      if (props.assetStatisticsObj?.bucketStatistics) {
        bucketStatistics.value.inventory =
          props.assetStatisticsObj?.bucketStatistics.inventory;
        bucketStatistics.value.inUse =
          props.assetStatisticsObj?.bucketStatistics.inUse;
        bucketStatistics.value.deactivate =
          props.assetStatisticsObj?.bucketStatistics.deactivate;
      }
    }
  }
);
</script>
<style lang="scss" scoped>
.daraBoardMainItem_content {
  width: 100%;
  height: 100%;

  .content_title {
    font-weight: 600;
    font-size: 14px;
    color: #666666;
  }

  .content_valueBox {
    .val {
      font-size: 24px;
      color: #333333;
    }

    .unit {
      font-size: 15px;
      color: #333333d0;
    }
  }

  .header_box {
    width: 100%;
    height: 44%;
    padding: 0 2px 0 0;
    .header_boxLeft,
    .header_boxRight {
      width: 50%;
      height: 100%;
      background: #fff;
      border-radius: 6px;
    }
  }

  .main_box {
    width: 100%;
    height: 56%;
    background: #fff;
    border-radius: 6px;

    .content_valueBox {
      .icon {
        width: 35px;
        height: 35px;
        background: linear-gradient(to bottom, #fbdf93, #f09360);
        padding: 6px;
        border-radius: 50%;
        .img {
          width: 90%;
          height: 90%;
          margin: auto;
        }
      }
    }
  }
}
</style>